<template>
  <div class="mask" @click="showCarts" v-show="showDialog && calculations.total >0"></div>
  <div class="cart">
      <div class="product" v-show="showDialog && calculations.total >0">
        <div class="product__header">
          <div class="product__header__checkall">
            <span
              class="iconfont product__header__checkall__icon"
              v-html="allChecked ? '&#xe69b;' : '&#xe6f7;'"
              @click="setCartItemChecked(shopId)"
            ></span>
          </div>
          <div class="product__header__checkall__text">全选</div>
          <div class="product__header__clear">
          <span @click="cleanCartProducts(shopId)" class="product__header__clear__btn">清空购物车</span>
          </div>
        </div>
        <template  v-for="item in calculations.productData"
          :key="item._id">
        <div
          class="product__item"
          v-if="item.count>0"
          @click="handleclick"
        >
          <div
            class="iconfont product__item__checked"
            v-html="item.checked ? '&#xe69b;' : '&#xe6f7;'"
            @click="handleCilckIcon(shopId, item._id)"
          ></div>
          <img :src="item.imgUrl" class="product__item__img">
          <div class="product__item__detail" >
            <h4 class="product__item__title">{{item.name}}</h4>
            <p class="product__item__price">
              <span class="product__item__yen">&yen;{{item.price}}</span>
              <span class="product__item__origin">&yen;{{item.oldPrice}}</span>
            </p>
          </div>
          <div class="product__number">
            <span class="product__number__minus" @click="changeCartItemInfo(shopId, item?._id, item, -1)">-</span>
            {{item?.count || 0}}
            <span class="product__number__plus" @click="changeCartItemInfo(shopId, item?._id, item, 1)">+</span>
          </div>
        </div>
      </template>
      </div>
    <div class="check">
      <div class="check__icon">
        <img
          src="http://www.dell-lee.com/imgs/vue3/basket.png"
          class="check__icon__img"
          @click="showCarts"
        />
        <div class="check__icon__tag">{{calculations.total}}</div>
      </div>
      <div class="check__info">
        总计：<span class="check__info__price">&yen;{{calculations.totalPrice}}</span>
      </div>
      <router-link :to="{path: `/order-confirmation/${shopId}`}">
      <div class="check__button">
          去结算
        </div>
        </router-link>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { useCartEffect } from './CommonCartPrice'
import { useStore } from 'vuex'

export default {
  name: 'Cart',
  setup () {
    const route = useRoute()
    const shopId = route.params.id
    const { changeCartItemInfo, calculations } = useCartEffect(shopId)
    console.log(calculations.value)
    const store = useStore()
    const showDialog = ref(false)

    const handleCilckIcon = (shopId, productId) => {
      store.commit('changeCartItemChecked', { shopId, productId })
    }
    const cleanCartProducts = (shopId) => {
      store.commit('cleanCartProducts', shopId)
    }
    const setCartItemChecked = (shopId) => {
      store.commit('setCartItemChecked', shopId)
    }
    const showCarts = () => {
      if (calculations.value.total === 0) {
        return
      }
      showDialog.value = !showDialog.value
    }
    const handleclick = () => {
      console.log('a')
    }
    return {
      calculations,
      changeCartItemInfo,
      shopId,
      handleCilckIcon,
      cleanCartProducts,
      setCartItemChecked,
      showDialog,
      showCarts,
      handleclick
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../style/viriable.scss';
@import '../../style/mixins.scss';
.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1;
}
.cart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: $bg-color;
  .check {
      display: flex;
      line-height: .49rem;
      height: .49rem;
      border: .01rem solid $content-bgColor;
      &__icon {
          width: .84rem;
          position: relative;
          &__img {
            display: block;
            width: .28rem;
            height: .26rem;
            margin: .12rem auto ;
          }
          &__tag {
              position: absolute;
              right: .2rem;
              top: .04rem;
              width: .2rem;
              height: .2rem;
              line-height: .2rem;
              text-align: center;
              font-size: .12rem;
              background: $light-fontcolor;
              border-radius: 50%;
              color: $bg-color;
              transform: scale(.8);
              transform-origin: left center;
          }
      }
      &__info {
          flex: 1;
           color: $content-fontcolor;
            font-size: .12rem ;
          &__price {
             color: $light-fontcolor;
             font-size: .18rem;
          }
      }
      &__button {
          width: .98rem;
          background: $button-bgcolor;
          text-align: center;
          color: $bg-color;
          font-size: .1rem;
      }
  }
  .product {
    flex: 1;
    overflow-y: scroll;
    background: $bg-color;
    &__header {
      height: .52rem;
      border-bottom: $content-bgColor solid .01rem;
      display: flex;
      line-height: .52rem;
      font-size: .14rem;
      &__checkall {
        width: .2rem;
        background: $content-bgColor;
        margin-left: .16rem;
        &__icon {
          display: inline-block;
          color: $icon-bgcolor;
          font-size: .2rem;
          background: $bg-color;
          vertical-align: top;
        }
        &__text {
          margin-left: .12rem;
          height: 100%;
        }
      }
      &__clear {
        flex: 1;
        text-align: right;
        font-size: .14rem;
        margin-right: .18rem;
        color: $content-fontcolor;
        &__btn {
          display: inline-block;
        }
      }
    }
    &__item {
      display: flex;
      padding: .12rem 0;
      margin: 0 .16rem;
      border-bottom: .01rem solid $content-bgColor;
      position: relative;
      &__detail {
        // overflow: hidden;
        width: 100%;
      }
      &__img {
        width: .46rem;
        height: .46rem;
        margin-right: .16rem;
      }
      &__title {
        line-height: .2rem;
        font-size: .14rem;
        color: $content-fontcolor;
        margin: 0;
        @include ellipsis
      }
      &__price {
        margin: .06rem 0 0 0;
        line-height: .2rem;
        font-size: .14rem;
        color: $light-fontcolor;
      }
      &__yen {
        font-size: .12rem;
      }
      &__origin {
        line-height: .2rem;
        font-size: .12rem;
        color: #999;
        margin-left: .06rem;
        // 横线
        text-decoration: line-through;
      }
      .product__number {
        position: absolute;
        right: 0;
        bottom: .12rem;
        &__minus, &__plus {
          width: .2rem;
          height: .2rem;
          display: inline-block;
          line-height: .18rem;
          text-align: center;
          border-radius: 50%;
          font-size: .2rem;
        }
        &__minus {
          border: .01rem solid $number-bordercolor;
          color: $number-bordercolor;
          margin-right: .1rem;
        }
        &__plus {
          background: $icon-bgcolor;
          color: $bg-color;
          margin-left: .1rem;
        }
      }
      &__checked {
        color: $icon-bgcolor;
        font-size: .2rem;
        line-height: .5rem;
        margin-right: .2rem;
      }
    }
  }
}
</style>
